<!--
   Vue-super-flow 是基于vue 开发的一款生成、预览流程图的组件。使用者可以根据不同的需求对图、节点、连线进行细致的控制 
-->
<!-- Flowchart.vue -->
<template>
   <div class="box">
      <VueFlow v-model:nodes="nodes" v-model:edges="edges"></VueFlow>
   </div>
   
 </template>

<script setup lang="ts">
import { ref } from 'vue'  
import { VueFlow } from '@vue-flow/core'

const nodes = ref([
  { id: '1', type: 'input', label: '开始', position: { x: 250, y: 5 } },
  { id: '2', label: '节点1', position: { x: 100, y: 100 } },
  { id: '3', label: '节点2', position: { x: 400, y: 100 } },
  { id: '4', label: '节点3', position: { x: 600, y: 200 } },
  { id: '5', label: '节点4', position: { x: 200, y: 200 } },
])
  
const edges = ref([
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e1-3', source: '1', target: '3' },
  { id: 'e1-4', source: '3', target: '4' },
  { id: 'e1-5', source: '3', target: '5' }
])
</script>
<style lang="scss" scoped>
.box{
   width:100%;
   height: 80vh;
   background-color:#cfd8dc;
}
</style>
<style>
/* import the necessary styles for Vue Flow to work */
@import '@vue-flow/core/dist/style.css';
/* import the default theme, this is optional but generally recommended */
@import '@vue-flow/core/dist/theme-default.css';
</style>
